import React, { Component } from 'react';
import '../scss/Particulars.scss'
import { LeftOutlined , StarOutlined , StockOutlined , HeartOutlined , ShoppingCartOutlined,AntCloudOutlined} from '@ant-design/icons';
import { good_goodinfo } from "../tools/api";
import { good_fav } from "../tools/api"; // 商品收藏
import { Swiper } from 'antd-mobile'

import { connect } from 'react-redux';
import { wang_callect_push,cancleCallect } from '../store/method/index';
import { set_boole } from '../store/method/boole';
import { Toast } from 'antd-mobile'
//*   加入购物车( 数量加1 ) 接口
import { shopcart_add } from "../tools/api"; // 商品收藏

class Particulars extends Component {

    state = {
        partArr:[],
        arrArr:[],
        banner:[],
        statezhuangtai:false
    }

    render() {
        return (
            <div className='particulars'>
                <div className="top">
                    <i onClick={ this.fuGo }><LeftOutlined /></i>
                    <h3>商品详情</h3>
                    <i></i>
                </div>

                <div className="main">
                    <div className="top">
                            <Swiper className='myswiper' autoplay loop autoplayInterval={ 2000 }>
                                 {
                                    this.state.banner.map((item)=>{
                                        return (
                                            <Swiper.Item >
                                                    <img src={ item } alt="" />
                                            </Swiper.Item>
                                        )
                                    })
                                 }
                            </Swiper>
                    </div>
                    <div className="my">
                       <div className='le'>活动价￥ <span> {this.state.arrArr.value} </span></div>
                        <div className='rig'>距结束5 天 0 小时</div>
                    </div>
                    
                    <div className="bottom">
                        <div className="shang">
                            <div className="baoyou">包邮包祱</div>
                            <div className="font_sun">{this.state.partArr.name}</div>
                            <div className="font_yue">{this.state.partArr.brandEN}</div>
                        </div>
                        <div className="zhong"></div>
                        <div className="xia"></div>
                    </div>

                    <div className="gogo">
                        <div className="zuo">
                            <div className="t">

                                {/* 逻辑判断 */}
                                <i onClick={ this.boole } className={` ${this.state.statezhuangtai == true ? 'callectTwo' : ''}`}><StarOutlined /></i>
                                <i><StockOutlined /></i>
                                <i><ShoppingCartOutlined /></i>
                            </div>
                            <div className="b">
                                <span onClick={ this.Particulars } >收藏</span>
                                <span onClick={ this.clear }>分享</span>
                                <span>购物</span>
                            </div>
                        </div>
                        <div className="you">
                            <div className='zu' onClick={ this.push_shoppingCart }>加入购物车</div>
                            <div className='yo' onClick={ this.log }>立即购买</div>
                        </div>
                    </div>
                </div>
            </div>
        );
    }
    
    log = () => {
        console.log(localStorage.getItem('boole'));
    }

    // 收藏 取消收藏 高亮显示
    boole = () => {
        if( this.state.statezhuangtai == true ) {
            this.setState({ statezhuangtai:!this.state.statezhuangtai })


            const id = JSON.stringify(localStorage.getItem('userinfo')).id
            this.props.cancleCallect( this.state.partArr )

            localStorage.setItem('boole',this.state.statezhuangtai)
            setTimeout(() => {
                this.props.wang_callect_push();
            }, 500);
        } else {
            this.setState({ statezhuangtai:!this.state.statezhuangtai })
            const id = JSON.stringify(localStorage.getItem('userinfo')).id

            localStorage.setItem('boole',this.state.statezhuangtai)
            good_fav( { userid:id , goodid: this.props.location.state.id } ).then(
                response => {
                    // 点击收藏的时候调用这个方法更新收藏列表
                    if( response.data.code == 200 ) {
                        this.props.wang_callect_push();
                        Toast.show({ icon: 'success', content: '收藏成功！' })
                    } else {
                        Toast.show({ content: '收藏失败！' })
                    }
                }
            )
            
            setTimeout(() => {
                this.props.wang_callect_push();
            }, 500);
        }
    }

    fuGo = () => {
        this.props.history.go(-1)
    }

    //*  加入购物车
    push_shoppingCart = () => {
       const shoppingID = this.state.partArr.id
       var id = JSON.parse(localStorage.getItem('userinfo')).id
    //    console.log(id);
       shopcart_add( { userid : id , goodid : shoppingID } ).then(
            response => {
                if( response.data.code == 200 ) {
                    Toast.show({ icon: 'success', content: '添加成功！' })
                } else {
                    Toast.show({ content: '添加失败！' })
                }
            }
       )
    }

    //*  商品--收藏
    Particulars = () => {
        // const id = JSON.stringify(localStorage.getItem('userinfo')).id
        // good_fav( { userid:id , goodid: this.props.location.state.id } ).then(
        //     response => {
        //         // 点击收藏的时候调用这个方法更新收藏列表
        //         if( response.data.code == 200 ) {
        //             this.props.wang_callect_push();
        //             Toast.show({ icon: 'success', content: '收藏成功！' })
        //         } else {
        //             Toast.show({ content: '收藏失败！' })
        //         }
        //     }
        // )
    }

    componentDidMount() { good_goodinfo({ goodid : this.props.location.state.id }).then( response => {  this.setState({ partArr:response.data.goodinfo , arrArr:response.data.goodinfo.salesPrice,banner:response.data.goodinfo.pics})})}}

var newParticulars = connect(
    state => {
        return {
            call:state.call,
            shop:state.shop,
            bool:state.bo
        }
    },
    dispatch => {
        return {
            set_boole : function(params) {
                dispatch( set_boole(params) )
            },
            cancleCallect : function(params) {
                dispatch( cancleCallect (params) )
            },
            wang_callect_push : function() {
                dispatch( wang_callect_push(  ) )
            },
            cancleCallect : function(item) {
                dispatch( cancleCallect( item ) )
            },
            //* ----分割线-----
        }
    }

)( Particulars )
export default newParticulars;